import { useState } from 'react';
import { Tabs } from 'antd';
import loadable from '@loadable/component';

import styles from './index.module.scss';

const WeekTop = loadable(() => import('@/pages/WeekTop'));
const Category = loadable(() => import('@/pages/Category'));

export default () => {
    const [tabKey, setTabKey] = useState('work');

    const tabItems = [
        { key: 'work', label: '热门作品', children: <WeekTop type="works" /> },
        { key: 'role', label: '热门角色', children: <WeekTop type="roles" /> },
        { key: 'category', label: '品类标签', children: <Category /> },
    ];

    return (
        <div className={styles['container']} id="discovery">
            <Tabs
                className={styles['tabs']}
                activeKey={tabKey}
                items={tabItems}
                onChange={(key) => setTabKey(key)}
                tabBarStyle={{ border: 0, margin: 0, padding: '0 12px' }}
                centered={true}
                destroyOnHidden={true}
            />
        </div>
    );
}
